import React,{useContext,useState} from 'react'
// import { useContext } from 'react/cjs/react.development'
import { AuthContext } from '../App'


const Login = () =>{
// 提交表单的时候会被调用
    const {dispatch} = useContext(AuthContext)
    // 表单里面是需要自己的状态的（内部状态），大部分的状态在全局，但是表单因为自身状态。。。
    const initialState = { //这里的状态跟父组件中的没有关系，是本组件的状态
        email:'',
        password:'',
        isSubmitting:false,  //正在干嘛,正在提交
        errorMessage:null //出现问题
    }

    const [data, setData] = useState(initialState) // 当前表单的自身状态，需要使用自身状态的时候使用useState。一般都是共享
    const handleInputChange = (event)=>{
        // console.log(event);
        // [event.target.name] 得到email或者其他的选项。为什么不直接使用email？因为其他的Change事件都使用它
        setData({
            ...data,
            [event.target.name]:event.target.value
        })
    }
    const handleFormSubmit = (event) =>{
        event.preventDefault();
        // 值得放进自己的项目中
        setData({
            ...data,
            isSubmitting:true, // 点击按钮，当前表达进入提交状态，报错信息设置为null（将上次的错误信息消除）
            errorMessage:null
        })
        // 远程mock
        fetch("https://www.fastmock.site/mock/4f8c468ae7202f91850147535d932340/sbt/ali/login",
        // 请求头
            {
                method:'post',
                headers:{
                    // 按照JSON格式处理它
                    "Content-Type":'application/json'
                },
                // 请求体，变成字符串
                body:JSON.stringify({
                    email:data.email,
                    password:data.password
                })
            }
        )
            .then(res=>res.json())
            .then(resJSON=>{
                console.log(resJSON);
            })

    }

    return(
        <div className="login-container">
            <div className="card">
                <div className="container">
                    <form onSubmit={handleFormSubmit}>
                        <h1>Login</h1>
                        <label htmlFor="email">Eamil Address
                            <input type="email" 
                                    value={data.email} 
                                    id='email'
                                    name="email"
                                    onChange={handleInputChange}
                                    />
                        </label>
                        <label htmlFor="email">Password Address
                            <input type="password" 
                                    value={data.password} 
                                    id='password'
                                    name="password"
                                    onChange={handleInputChange}
                                    />
                        </label> 
                        {/* 如果有错误信息的话，执行下面的代码 */}
                        {data.errorMessage && (
                            <span className="form-error" >{data.errorMessage}</span>
                        )}
                        {/* 项目优化点，亮点 */}
                        {/*     防止多次提交，点击进入提交的时候 isSubmitting为false，这时按钮禁用*/}
                        <button disabled={data.isSubmitting} type="submit">Login</button>
                    </form>
                </div>
            </div>
        </div>
    )
}

export default Login